import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Button, Modal, Spin, message } from 'antd';
import { EMAIL_RE } from '@util/constants';
import { sendTestMail } from '@api/email';
import cn from 'classnames';

const prefixCls = 'mail-config';
const { TextArea } = Input;
const { Item: FormItem } = Form;
const formItemLayout = {
  labelCol: {
    span: 5
  },
  wrapperCol: {
    span: 19
  }
};

class EmailTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      okText: '',
      spinning: false,
      to: '',
      confirmLoading: false
    };
  }

  onClickTestOk = () => {
    const { validateFields } = this.props.form;
    const { setModalVisible } = this.props;

    validateFields((errors, values) => {
      if (errors) {
        message.error('有错误，不能提交');
        return;
      }
      this.setState({ spinning: true, to: values.to });
      let filter = {};
      filter.to = [{ name: '', email: values.to }];
      delete values.to;
      this.setState({ confirmLoading: true });
      sendTestMail({ ...values, ...filter })
        .then(() => {
          try {
            const okText = `${this.state.to} - 发送成功`;
            setModalVisible(false);
            this.setState({ spinning: false, okText, confirmLoading: false });
            // eslint-disable-next-line
          } catch (e) {}
        })
        .catch(error => {
          setModalVisible(false);
          this.setState({ spinning: false, okText: error.message, confirmLoading: false });
        });
    });
  };

  render() {
    const {
      visible,
      setModalVisible,
      form: { getFieldDecorator }
    } = this.props;
    const { okText, spinning, confirmLoading } = this.state;
    return (
      <div>
        <div className={`${prefixCls}-page-title`}>邮箱测试</div>
        <div className={`${prefixCls}-test-message`}>
          <Spin tip="加载中" spinning={spinning}>
            {okText}
          </Spin>
        </div>
        <Button type="primary" onClick={() => setModalVisible(true)}>
          测试
        </Button>
        <Modal
          maskClosable={false}
          visible={visible}
          className={cn('email-modal', 'no-header-bottom-lines', 'bottom-center', 'padding-24')}
          title="添加测试邮箱"
          onOk={this.onClickTestOk}
          confirmLoading={confirmLoading}
          onCancel={() => setModalVisible(false)}
        >
          <Form labelAlign="left">
            <FormItem {...formItemLayout} label="收件人" colon={false}>
              {getFieldDecorator('to', {
                rules: [
                  {
                    required: true,
                    message: '请输入收件人邮箱'
                  },
                  {
                    pattern: EMAIL_RE,
                    message: '您输入的格式有误'
                  }
                ],
                validateFirst: true
              })(<Input placeholder="请输入收件人邮箱" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="邮件标题" colon={false}>
              {getFieldDecorator('title', {
                rules: [
                  {
                    required: true,
                    message: '请输入邮件标题'
                  }
                ]
              })(<Input placeholder="请输入邮件标题" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="邮件内容" colon={false}>
              {getFieldDecorator('content', {
                rules: [
                  {
                    required: true,
                    message: '请输入邮件内容'
                  }
                ]
              })(<TextArea style={{ height: 100 }} />)}
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}

EmailTest.propTypes = {
  form: PropTypes.object,
  visible: PropTypes.bool,
  setModalVisible: PropTypes.func
};

export default Form.create()(EmailTest);
